<template>
  <div class="app-container">
    <div class="left">
      <h1>汽车轮胎智能制造<br>边云协同平台</h1>
      <p class="stitle">
        Intelligent Manufacturing Edge-Cloud Collaborative Platform for Automotive Tire Production
      </p>
      <div class="line"></div>
    </div>
    <div class="right">
      <ul>
        <li v-for="(obj,i) in routerList" :key="i" @mouseenter="addIcon(i)" @mouseleave="removeIcon(i)"
            @click="toManagePage(obj.code)"
        >{{ obj.name + '    ' }}<i :class="obj.icon"></i></li>
      </ul>
    </div>

  </div>
</template>

<script>
import { getCustomRouters } from '@/api/menu'
import router, { constantRoutes, dynamicRoutes } from '@/router'
import { filterDynamicRoutes, loadView } from '@/store/modules/permission'
import Layout from '@/layout'
import ParentView from '@/components/ParentView'
import InnerLink from '@/layout/components/InnerLink'

export default {
  name: 'Index',
  data() {
    return {
      routerList: [
        { code: 'data', name: '远程监控协同系统', icon: '' },
        { code: 'quality', name: '轮胎质量分析系统', icon: '' },
        { code: 'craft', name: '生产工艺优化系统', icon: '' },
        { code: 'equipment', name: '设备健康管理系统', icon: '' },
        { code: 'system', name: '平台管理系统', icon: '' }
      ]
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    addIcon(i) {
      this.routerList[i].icon = 'el-icon-arrow-right'
    },
    removeIcon() {
      for (let i = 0; i < 5; i++) {
        this.routerList[i].icon = ''
      }
    },
    toManagePage(moduleType) {
      sessionStorage.setItem('moduleType', moduleType)
      getCustomRouters(moduleType).then((res) => {
        const sdata = JSON.parse(JSON.stringify(res.data))
        const rdata = JSON.parse(JSON.stringify(res.data))
        const sidebarRoutes = this.filterAsyncRouter(sdata)
        const rewriteRoutes = this.filterAsyncRouter(rdata, false, true)
        const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
        rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
        const allRouters = asyncRoutes.concat(rewriteRoutes)
        router.addRoutes(allRouters)
        this.$store.commit('SET_ROUTES', rewriteRoutes)
        this.$store.commit(
          'SET_SIDEBAR_ROUTERS',
          constantRoutes.concat(sidebarRoutes)
        )
        this.$store.commit('SET_DEFAULT_ROUTES', sidebarRoutes)
        this.$store.commit('SET_TOPBAR_ROUTES', sidebarRoutes)
        setTimeout(() => {
          if (rewriteRoutes.length > 1) {
            this.$router.push(rewriteRoutes[0].path)
          } else {
            this.$modal.msgWarning('未授权菜单信息')
          }
        }, 300)
      })
    },
    filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
      return asyncRouterMap.filter((route) => {
        if (type && route.children) {
          route.children = this.filterChildren(route.children)
        }
        if (route.component) {
          // Layout ParentView 组件特殊处理
          if (route.component === 'Layout') {
            route.component = Layout
          } else if (route.component === 'ParentView') {
            route.component = ParentView
          } else if (route.component === 'InnerLink') {
            route.component = InnerLink
          } else {
            route.component = loadView(route.component)
          }
        }
        if (route.children != null && route.children && route.children.length) {
          route.children = this.filterAsyncRouter(route.children, route, type)
        } else {
          delete route['children']
          delete route['redirect']
        }
        return true
      })
    },
    filterChildren(childrenMap, lastRouter = false) {
      let children = []
      childrenMap.forEach((el, index) => {
        if (el.children && el.children.length) {
          if (el.component === 'ParentView' && !lastRouter) {
            el.children.forEach((c) => {
              c.path = el.path + '/' + c.path
              if (c.children && c.children.length) {
                children = children.concat(this.filterChildren(c.children, c))
                return
              }
              children.push(c)
            })
            return
          }
        }
        if (lastRouter) {
          el.path = lastRouter.path + '/' + el.path
        }
        children = children.concat(el)
      })
      return children
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  background: url("../assets/images/home.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;

  .left {
    margin-left: 96px;
    margin-right: 92px;

    h1 {
      width: 650px;
      height: 165px;
      margin-top: 0;
      font-size: 65px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      line-height: 100px;
      word-spacing: 10px;
    }

    .stitle {
      height: 23px;
      font-size: 20px;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #f3f3f3;
      margin-top: 68px;
    }

    .line {
      width: 420px;
      height: 6px;
      background: #19966e;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
    }
  }

  .right {
    li {
      list-style: none;
      width: 360px;
      height: 80px;
      margin-bottom: 54px;
      background: #ffffff;
      box-shadow: 0px 3px 9px 1px rgba(204, 204, 204, 0.16);
      border-radius: 49px 49px 49px 49px;
      opacity: 0.6;
      text-align: center;
      line-height: 80px;
      font-size: 28px;
      color: #003323;
      cursor: pointer;

      &:hover {
        width: 420px;
        height: 90px;
        line-height: 90px;
        background: #008b5f;
        box-shadow: 0px 3px 9px 1px rgba(204, 204, 204, 0.16);
        opacity: 1;
        color: #fff;
        border: 1px #fff solid;
        transition-duration: 0.2s;
      }

      &:nth-child(1) {
        margin-left: 110px;
      }

      &:nth-child(2) {
        margin-left: 53px;
      }

      &:nth-child(5) {
        margin-left: 110px;
      }

      &:nth-child(4) {
        margin-left: 53px;
      }
    }
  }
}
</style>
